
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            height: 900px;
            margin-top: 80px;
        }
        .doTable{
            width: 700px;
            margin: auto;
        }
      
        .trr{
            text-align: center;
            font-weight: bold;
        }
        .doButton{
            width: 305px;
            margin: auto;
            margin-top: 20px;
            margin-bottom: 80px;
        }
        #df,#dl{
            width: 150px;
        }
        .doInput{
            margin: auto;
            width: 300px;
        }
        .inputInfo{
            margin-bottom: 20px;
            width: 300px;
            text-align: center;
        }
        .inPut{
            display: flex;
            margin-bottom: 20px;
            width: 300px;
        }
        .inPut>div{
            width: 60px;
            text-align: right;
            margin-right: 10px;
        }
        .doButton2{
            width: 85px;
            margin: auto;
        }
        .buttonb{
            width: 40px;
        }
    </style>
    <script>
        function doAdd(){
            //获取文本框的值
            var name=document.getElementById("name").value;
            var age=document.getElementById("age").value;
            var isChecked=document.getElementById("male").checked;//布尔值
            // if(isChecked){//男的被选中
            //     var sex=document.getElementById("male").value;
            // }else{//女的被选中
            //     var sex=document.getElementById("female").value;
            // }
            var sex=isChecked?document.getElementById("male").value:document.getElementById("female").value;
            var email=document.getElementById("email").value;
            var arrs=[name,age,sex,email,"<input type='button' value='删除' onclick='doDelete(this)'>"];
            //创建tr元素
            var tr=document.createElement("tr");
            //创建td元素
            for(var i=0;i<5;i++){
                var td=document.createElement("td");
                td.innerHTML=arrs[i];
                tr.appendChild(td);
            }

            //获取tr的父元素tbody
            var tb=document.getElementById("tb");
            tb.appendChild(tr);


        }


        function doDelete(obj){
            // console.log(obj.parentNode.parentNode);
            obj.parentNode.parentNode.remove();
        }

        function  doDeleteFirst(){
           //获取tr的父元素tbody
           var tb=document.getElementById("tb");

           //在元素tbody内部根据标签名查找所有的tr元素
           var trs=tb.getElementsByTagName("tr");
           trs[0].remove();//删除
        }

        function doDeleteLast(){
            //获取tr的父元素tbody
            var tb=document.getElementById("tb");

            //在元素tbody内部根据标签名查找所有的tr元素
            var trs=tb.getElementsByTagName("tr");
            trs[trs.length-1].remove();//删除
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="doTable">
            <table border="1" width="700"px>
                <thead>
                    <tr class="trr">
                        <td>Name</td>
                        <td>Age</td>
                        <td>Gender</td>
                        <td>Email</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody id="tb" align="center">
                    <tr>
                        <td>mike</td>
                        <td>20</td>
                        <td>男</td>
                        <td>222@qq.com</td>
                        <td><input type="button" value="删除" onclick='doDelete(this)'></td>
                    </tr>
                    <tr>
                        <td>mike2</td>
                        <td>20</td>
                        <td>男</td>
                        <td>222@qq.com</td>
                        <td><input type="button" value="删除" onclick='doDelete(this)'></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="doButton">
            <input type="button" value="从首行删除" id="df" onclick="doDeleteFirst()">
            <input type="button" value="从末行删除" id="dl" onclick="doDeleteLast()">
        </div>
        <div class="doInput">
            <form action="">
                <div class="inputInfo">Pls Input Info</div>
                <div class="inPut">
                    <div>Name:</div><input type="text" id="name">
                </div>
                <div class="inPut">
                    <div>Age:</div><input type="text" id="age">
                </div>
                <div class="inPut">
                    <div>Gender:</div>
                    <div>
                        <input type="radio" id="male" name="sex" value="男" checked><label for="male">男</label>
                    </div>
                    <div>
                        <input type="radio" name="sex" id="female" value="女"><label for="female">女</label>
                    </div>
                </div>
                <div class="inPut">
                    <div>Email:</div><input type="text" id="email">
                </div>
                <div class="doButton2">
                <div>
                    <input type="button" value="添加" class="buttonb" onclick="doAdd()">
                    <input type="reset" value="重置" class="buttonb">
                </div>
            </div>
            </form>
        </div>
    </div>
</body>
</html>